import { Component, ViewChild, TemplateRef, ViewContainerRef, OnInit, HostListener } from '@angular/core';

import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
import { MatButton } from '@angular/material';
import { OverlayRef, Overlay, OverlayConfig } from '@angular/cdk/overlay';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'angualr-cdk';

  constructor(private overlay: Overlay, private viewContainerRef: ViewContainerRef) { }

  // @ViewChild('overlayMenuList') overlayMenuList: TemplateRef<any>;
  // @ViewChild('originFab') originFab: MatButton;
  // overlayRef: OverlayRef;

  // @HostListener('mouseenter') onMouseEnter() {
  //   this.displayMenu();
  // }
  
  // @HostListener('mouseleave') onMouseLeave() {
  //   this.leaveMenu();
  // }
  
  // ngOnInit() {
  //   const strategy = this.overlay
  //   .position()
  //   .connectedTo(this.originFab._elementRef, { originX: 'end', originY: 'bottom' }, { overlayX: 'start', overlayY: 'top' });
  //   const config = new OverlayConfig({
      
  //   });
  //   this.overlayRef = this.overlay.create({
  //     width: '900px',
  //     positionStrategy: strategy,
  //   });

  // }
  // displayMenu() {
  //   this.overlayRef.attach(new TemplatePortal(this.overlayMenuList, this.viewContainerRef));
  //   // if (this.overlayRef && this.overlayRef.hasAttached()) {
  //   //   this.overlayRef.detach();
  //   // } else {
  //   //   this.overlayRef.attach(new TemplatePortal(this.overlayMenuList, this.viewContainerRef));
  //   // }
  // }
  // leaveMenu(){
  //   this.overlayRef.detach();
  // }

}
